<template>
  <div>
    <table border="1px">
      <tr>
        <td>照片</td>
        <td><img :src=u.photo width="200px"/></td>
      </tr>
      <tr>
        <td>姓名</td>
        <td>{{u.name}}</td>
      </tr>
      <tr>
        <td>年龄</td>
        <td>{{u.age}}</td>
      </tr>
      <tr>
        <td>好友</td>
        <td>
          <ul>
            <li v-for="item in u.friends">{{item}}</li>
          </ul>
        </td>
      </tr>
    </table>
  </div>
</template>
<script setup>
   import {ref} from 'vue';
   let u = ref({
     photo: 'logo.png',
     name: '张三',
     age: 18,
     friends: ['李四', '王五', '赵六']
   });

</script>
<style scoped>
   table{
     margin: 10px auto;
     width: 200px;
   }
</style>